<template>
  <div>
    <div>
      <el-input
        class="addPosInput"
        size="small"
        placeholder="添加职位..."
        prefix-icon="el-icon-plus"
        @keydown.enter.native="addPosition"
        v-model="pos.name">
      </el-input>
      <el-button type="primary" size="small" @click="addPosition">添加</el-button>
    </div>
    <div class="posManaMain">
      <el-table :data="positions" stripe border style="width: 75%" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="编号"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="职位"
          width="260">
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="创建时间"
          width="260">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button size="small" style="margin-top: 8px;" type="danger" 
               :disabled="this.multipleSelection.length == 0"
               @click="deleteMany">批量删除
    </el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="25%">
      <el-tag>职位名称</el-tag>
      <el-input size="small" class="updatePosInput" v-model="updatePos.name"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="doUpdatePos">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'PosMana',
    data(){
      return {
        pos: {
          name: ''
        },
        positions: [],
        dialogVisible: false,
        updatePos: { //编辑职位的变量
          name: ''
        },
        multipleSelection: [] //批量删除数组
      }
    },
    methods: {
      addPosition(){
        if(this.pos.name){
          this.postRequest('/system/basic/pos/', this.pos).then(resp=>{
            if(resp){
              // 刷新列表
              this.initPositions()
              // 输入框置空
              this.pos.name = ''
            }
          })
        }else{
          this.$message.error('职位名称不能为空')
        }
      },
      initPositions(){
        this.getRequest('/system/basic/pos/getAllPositions').then(resp=>{
          if(resp){
            // console.log(resp);
            this.positions = resp.obj;
          }
        })
      },
      // 编辑职位
      handleEdit(index, data){
        Object.assign(this.updatePos, data); //直接赋值会造成未确定修改，列表中的值就改变
        this.updatePos.createDate = ''; //后端不允许修改创建时间
        this.dialogVisible = true;
      },
      doUpdatePos(){
        this.putRequest('/system/basic/pos/',this.updatePos).then(resp=>{
          if(resp){
            this.initPositions();
            this.dialogVisible = false;
          }
        })
      },
      // 删除职位
      handleDelete(index, data){
        this.$confirm('此操作将永久删除[ '+data.name+' ]职位，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/system/basic/pos/'+data.id).then(resp=>{
            if(resp){
              // 刷新列表
              this.initPositions()
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 批量删除
      handleSelectionChange(val){
        this.multipleSelection = val;
      },
      deleteMany(){
        this.$confirm('此操作将永久删除[ '+this.multipleSelection.length+' ]条职位，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = '?'
          this.multipleSelection.forEach(item=>{
            ids += 'ids='+item.id+'&';
          })
          this.deleteRequest('/system/basic/pos/'+ids).then(resp=>{
            if(resp){
              // 刷新列表
              this.initPositions()
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
    mounted(){
      this.initPositions()
    }
  }
</script>

<style scoped>
  .addPosInput{
    width: 300px;
    margin-right: 10px;
  }

  .posManaMain{
    margin-top: 10px;
  }
  .updatePosInput{
    width: 200px;
    margin-left: 8px;
  }
</style>